/* ============================================================
   STYLE.CSS — le design du portfolio
   Plan :
     1. Couleurs (jour / nuit)
     2. Base
     3. Cadre et écriture à la main
     4. Haut de page (date, menu, langues, soleil/lune)
     5. Boutons gribouillis
     6. Accueil (image jour/nuit + ton nom)
     7. Projets (filtres + cartes)
     8. Page d'un projet (vidéo + galerie de photos)
     9. À propos et contact
    10. Bas de page
    11. Animation d'apparition
    12. Téléphone
   ============================================================ */


/* ===== 1. COULEURS =====
   Le jour : valeurs de :root. La nuit : valeurs de body.sombre. */
:root {
  --papier: #fdfdfd;        /* fond de la page */
  --texte: #111111;         /* texte principal */
  --texte-doux: #6b6b6b;    /* texte secondaire */
  --rose: #fb04ad;          /* étoiles des compétences */
  --ligne: #111111;         /* bordures fines (images, vidéo) */
  --cadre: #fb04ad;         /* cadre, bas de page, filtres, étiquettes */
}

body.sombre {
  --papier: #111111;
  --texte: #f2f2f2;
  --texte-doux: #9a9a9a;
  --ligne: #f2f2f2;
  --cadre: #d4f900;
}


/* ===== 2. BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  background: var(--papier);
  color: var(--texte);
  line-height: 1.5;
  transition: background 0.3s, color 0.3s;
}

section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 90px 36px;
}

h2 { font-size: 1.6rem; margin-bottom: 30px; }


/* ===== 3. CADRE ET ÉCRITURE À LA MAIN ===== */

/* Cadre épais collé aux bords de l'écran */
.cadre {
  position: fixed;
  inset: 0;
  border: 10px solid var(--cadre);
  pointer-events: none;     /* on peut cliquer "à travers" */
  z-index: 100;
}

/* Titres écrits à la main */
.main-ecrite {
  font-family: "Rock Salt", cursive;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.3;
}


/* ===== 4. HAUT DE PAGE ===== */
.haut {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30px 36px 0;
  position: relative;
  z-index: 5;
}

.haut-droite {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.stickers { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* Date et heure */
.date { font-size: 11px; line-height: 1.4; }

/* Langues */
.reglages { display: flex; gap: 10px; align-items: center; }

.langues { display: flex; gap: 2px; }

.langue {
  background: none;
  border: none;
  color: var(--texte-doux);
  font-size: 11px;
  padding: 2px 5px;
  cursor: pointer;
}

.langue.actif { color: var(--texte); text-decoration: underline; }

/* Bouton jour/nuit : soleil le jour, lune la nuit */
#bouton-theme {
  width: 30px;
  height: 30px;
  background: url("images/soleil.png") center / contain no-repeat;
  border: none;
  cursor: pointer;
  transition: transform 0.3s;
}

#bouton-theme:hover { transform: rotate(-15deg) scale(1.15); }

body.sombre #bouton-theme { background-image: url("images/lune.png"); }


/* --- Page principale seulement : haut plus gros, par-dessus l'image --- */
body:has(.hero) .haut {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Date, heure et langues : blanc + contour noir le jour */
body:has(.hero) .date,
body:has(.hero) .langue,
body:has(.hero) .langue.actif {
  color: #ffffff;
}

body:has(.hero) .date,
body:has(.hero) .langue {
  font-size: 14px;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

/* ... noir + contour blanc la nuit */
body.sombre:has(.hero) .date,
body.sombre:has(.hero) .langue,
body.sombre:has(.hero) .langue.actif {
  color: #111111;
}

body.sombre:has(.hero) .date,
body.sombre:has(.hero) .langue {
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}

/* Soleil/lune : plus gros, contour noir le jour, blanc la nuit */
body:has(.hero) #bouton-theme {
  width: 40px;
  height: 40px;
  filter:
    drop-shadow(1px 0 0 #000)
    drop-shadow(-1px 0 0 #000)
    drop-shadow(0 1px 0 #000)
    drop-shadow(0 -1px 0 #000);
}

body.sombre:has(.hero) #bouton-theme {
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff);
}


/* ===== 5. BOUTONS GRIBOUILLIS ===== */
.sticker {
  display: inline-block;
  padding: 9px 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--texte);          /* noir le jour, blanc la nuit */
  text-decoration: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: transform 0.2s;
  will-change: transform;       /* animation fluide, sans bug */
  backface-visibility: hidden;
}

.sticker:hover { transform: rotate(-4deg) scale(1.08); }

/* Chaque couleur est un petit dessin "au crayon" (ne pas couper ces lignes) */
.sticker.rose { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 126 46' preserveAspectRatio='none'><defs><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4'/><feDisplacementMap in='SourceGraphic' scale='2.5'/></filter><pattern id='h' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='rotate(-35)'><rect width='3' height='3' fill='%23fb04ad' opacity='.45'/><rect width='1.7' height='3' fill='%23fb04ad'/></pattern></defs><g filter='url(%23c)'><polygon points='3.3,0.2 13.9,7.0 22.8,0.7 30.2,8.0 39.5,0.8 48.9,7.0 59.7,1.8 67.8,7.3 79.2,2.1 88.3,7.8 99.2,-0.1 108.1,7.5 114.6,0.1 115.6,14.0 119.6,20.0 114.4,26.0 116.3,39.3 106.2,32.1 95.6,37.9 86.8,32.4 78.4,38.6 69.7,31.9 59.2,39.7 51.5,31.4 41.6,39.1 33.5,32.6 21.8,40.2 11.8,31.8 5.0,38.2 5.0,26.0 0.1,20.0 5.3,14.0' fill='none' stroke='%23fb04ad' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/><polygon points='3.3,0.2 13.9,7.0 22.8,0.7 30.2,8.0 39.5,0.8 48.9,7.0 59.7,1.8 67.8,7.3 79.2,2.1 88.3,7.8 99.2,-0.1 108.1,7.5 114.6,0.1 115.6,14.0 119.6,20.0 114.4,26.0 116.3,39.3 106.2,32.1 95.6,37.9 86.8,32.4 78.4,38.6 69.7,31.9 59.2,39.7 51.5,31.4 41.6,39.1 33.5,32.6 21.8,40.2 11.8,31.8 5.0,38.2 5.0,26.0 0.1,20.0 5.3,14.0' fill='url(%23h)' stroke='%23d1008e' stroke-width='1.3' stroke-linejoin='round'/><polygon points='5.1,1.2 14.8,7.6 23.4,1.2 32.3,7.9 42.7,2.1 50.6,8.4 58.2,1.5 69.9,9.2 80.0,0.5 87.5,8.4 95.4,0.9 105.3,7.1 114.2,1.6 115.3,14.0 118.5,20.0 114.8,26.0 117.5,38.0 106.5,32.1 98.9,39.8 89.5,31.5 78.3,38.7 70.9,33.1 58.6,38.2 49.6,31.4 41.3,39.2 31.1,30.8 22.3,38.7 13.6,33.1 4.8,39.0 5.2,26.0 1.4,20.0 4.1,14.0' fill='none' stroke='%23d1008e' stroke-width='.7' opacity='.7'/></g></svg>"); }
.sticker.jaune { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 126 46' preserveAspectRatio='none'><defs><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4'/><feDisplacementMap in='SourceGraphic' scale='2.5'/></filter><pattern id='h' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='rotate(-35)'><rect width='3' height='3' fill='%23d4f900' opacity='.45'/><rect width='1.7' height='3' fill='%23d4f900'/></pattern></defs><g filter='url(%23c)'><polygon points='3.3,0.2 13.9,7.0 22.8,0.7 30.2,8.0 39.5,0.8 48.9,7.0 59.7,1.8 67.8,7.3 79.2,2.1 88.3,7.8 99.2,-0.1 108.1,7.5 114.6,0.1 115.6,14.0 119.6,20.0 114.4,26.0 116.3,39.3 106.2,32.1 95.6,37.9 86.8,32.4 78.4,38.6 69.7,31.9 59.2,39.7 51.5,31.4 41.6,39.1 33.5,32.6 21.8,40.2 11.8,31.8 5.0,38.2 5.0,26.0 0.1,20.0 5.3,14.0' fill='none' stroke='%23d4f900' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/><polygon points='3.3,0.2 13.9,7.0 22.8,0.7 30.2,8.0 39.5,0.8 48.9,7.0 59.7,1.8 67.8,7.3 79.2,2.1 88.3,7.8 99.2,-0.1 108.1,7.5 114.6,0.1 115.6,14.0 119.6,20.0 114.4,26.0 116.3,39.3 106.2,32.1 95.6,37.9 86.8,32.4 78.4,38.6 69.7,31.9 59.2,39.7 51.5,31.4 41.6,39.1 33.5,32.6 21.8,40.2 11.8,31.8 5.0,38.2 5.0,26.0 0.1,20.0 5.3,14.0' fill='url(%23h)' stroke='%239fbc00' stroke-width='1.3' stroke-linejoin='round'/><polygon points='5.1,1.2 14.8,7.6 23.4,1.2 32.3,7.9 42.7,2.1 50.6,8.4 58.2,1.5 69.9,9.2 80.0,0.5 87.5,8.4 95.4,0.9 105.3,7.1 114.2,1.6 115.3,14.0 118.5,20.0 114.8,26.0 117.5,38.0 106.5,32.1 98.9,39.8 89.5,31.5 78.3,38.7 70.9,33.1 58.6,38.2 49.6,31.4 41.3,39.2 31.1,30.8 22.3,38.7 13.6,33.1 4.8,39.0 5.2,26.0 1.4,20.0 4.1,14.0' fill='none' stroke='%239fbc00' stroke-width='.7' opacity='.7'/></g></svg>"); }
.sticker.bleu { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 126 46' preserveAspectRatio='none'><defs><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4'/><feDisplacementMap in='SourceGraphic' scale='2.5'/></filter><pattern id='h' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='rotate(-35)'><rect width='3' height='3' fill='%2329c5f6' opacity='.45'/><rect width='1.7' height='3' fill='%2329c5f6'/></pattern></defs><g filter='url(%23c)'><polygon points='3.3,0.2 13.9,7.0 22.8,0.7 30.2,8.0 39.5,0.8 48.9,7.0 59.7,1.8 67.8,7.3 79.2,2.1 88.3,7.8 99.2,-0.1 108.1,7.5 114.6,0.1 115.6,14.0 119.6,20.0 114.4,26.0 116.3,39.3 106.2,32.1 95.6,37.9 86.8,32.4 78.4,38.6 69.7,31.9 59.2,39.7 51.5,31.4 41.6,39.1 33.5,32.6 21.8,40.2 11.8,31.8 5.0,38.2 5.0,26.0 0.1,20.0 5.3,14.0' fill='none' stroke='%2329c5f6' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/><polygon points='3.3,0.2 13.9,7.0 22.8,0.7 30.2,8.0 39.5,0.8 48.9,7.0 59.7,1.8 67.8,7.3 79.2,2.1 88.3,7.8 99.2,-0.1 108.1,7.5 114.6,0.1 115.6,14.0 119.6,20.0 114.4,26.0 116.3,39.3 106.2,32.1 95.6,37.9 86.8,32.4 78.4,38.6 69.7,31.9 59.2,39.7 51.5,31.4 41.6,39.1 33.5,32.6 21.8,40.2 11.8,31.8 5.0,38.2 5.0,26.0 0.1,20.0 5.3,14.0' fill='url(%23h)' stroke='%230a9fd0' stroke-width='1.3' stroke-linejoin='round'/><polygon points='5.1,1.2 14.8,7.6 23.4,1.2 32.3,7.9 42.7,2.1 50.6,8.4 58.2,1.5 69.9,9.2 80.0,0.5 87.5,8.4 95.4,0.9 105.3,7.1 114.2,1.6 115.3,14.0 118.5,20.0 114.8,26.0 117.5,38.0 106.5,32.1 98.9,39.8 89.5,31.5 78.3,38.7 70.9,33.1 58.6,38.2 49.6,31.4 41.3,39.2 31.1,30.8 22.3,38.7 13.6,33.1 4.8,39.0 5.2,26.0 1.4,20.0 4.1,14.0' fill='none' stroke='%230a9fd0' stroke-width='.7' opacity='.7'/></g></svg>"); }

/* Boutons du menu : même largeur dans toutes les langues */
.stickers .sticker {
  width: 100px;
  padding: 9px 0;
  text-align: center;
}

/* Gros boutons (courriel, retour aux projets) */
.sticker.gros { font-size: 14px; padding: 16px 34px; }

/* Nuit : contour noir autour du texte blanc */
body.sombre .sticker {
  text-shadow:
    -1px -1px 0 #00000095,
     1px -1px 0 #00000095,
    -1px  1px 0 #00000095,
     1px  1px 0 #00000095;
}

/* Page principale : boutons du menu plus gros */
body:has(.hero) .stickers .sticker {
  width: 125px;
  padding: 12px 0;
  font-size: 13px;
}

/* Page principale, jour : contour blanc autour du texte */
body:not(.sombre):has(.hero) .sticker {
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}


/* ===== 6. ACCUEIL ===== */
.hero {
  position: relative;
  max-width: none;
  height: 100vh;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
}

/* L'image de fond : jour.jpg le jour, nuit.jpg la nuit.
   --visibilite est réglée par script.js (fondu quand on défile). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/jour.jpg") center / cover no-repeat;
  opacity: calc(0.95 * var(--visibilite, 1));
}

body.sombre .hero::before { background-image: url("images/nuit.jpg"); }

/* Ton nom en grand, au centre */
.nom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  font-size: clamp(2rem, 7vw, 5.5rem);
  -webkit-text-stroke: 1.5px #fb04ad;     /* contour rose le jour */
  z-index: 1;
}

body.sombre .nom { -webkit-text-stroke: 3px #aec900; }   /* contour vert plus épais la nuit */


/* ===== 7. PROJETS ===== */

/* Filtres */
.filtres { display: flex; gap: 16px; margin-bottom: 30px; }

.filtre {
  background: none;
  border: none;
  color: var(--cadre);
  font-size: 12px;
  cursor: pointer;
}

.filtre.actif { text-decoration: underline; }

/* Grille de cartes */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 30px;
}

.carte {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s;
}

.carte:hover { transform: rotate(-1.5deg); }

.carte.cachee { display: none; }     /* carte cachée par un filtre */

/* Image en noir et blanc, la couleur revient au survol */
.carte img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--ligne);
  filter: grayscale(1);
  transition: filter 0.4s;
}

.carte:hover img { filter: grayscale(0); }

/* Image de couverture zoomée (cartes avec class="zoom", ex : projet 3) */
.zoom {
  overflow: hidden;              /* cache ce qui dépasse */
  border: 1px solid var(--ligne);
}

.zoom img {
  border: none;
  transform: scale(1.3);         /* niveau de zoom : change ce chiffre */
}

.carte-texte { padding: 12px 2px; }
.carte-texte h3 { font-size: 14px; font-weight: 600; margin: 4px 0; }
.carte-texte p { color: var(--texte-doux); font-size: 12px; }

/* Petite étiquette de catégorie (cartes + page projet) */
.etiquette {
  font-size: 10px;
  color: var(--cadre);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ===== 8. PAGE D'UN PROJET ===== */
.page-projet {
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 36px 100px;
}

.bouton-retour {
  display: block;
  width: fit-content;
  margin-bottom: 40px;
  color: var(--texte);
  font-size: 12px;
}

.page-projet h1 {
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  margin: 8px 0 30px;
}

/* Boîte de la vidéo, format 16:9 */
.video {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texte-doux);
  font-size: 12px;
}

.video video,
.video iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Diaporama de photos : une photo à la fois, en entier, avec 2 flèches */
.diaporama {
  display: grid;
  grid-template-columns: auto 1fr auto;   /* flèche | photo | flèche */
  align-items: center;
  gap: 18px;
}

/* Zone de la photo : toujours la même taille, les flèches ne bougent pas */
.cadre-photo {
  height: min(60vh, 520px);       /* hauteur de la zone photo : change ce chiffre */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-diapo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;            /* la photo n'est jamais coupée */
}

/* Les mini flèches (rose le jour, jaune la nuit) */
.fleche {
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  color: var(--cadre);
  cursor: pointer;
  transition: transform 0.2s;
}

.fleche svg { width: 100%; height: 100%; display: block; }

.fleche.gauche svg { transform: scaleX(-1); }   /* la flèche de gauche pointe vers la gauche */

.fleche:hover { transform: scale(1.2); }

/* Numéro de la photo sous le diaporama (ex : 1 / 3) */
.compteur {
  text-align: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--texte-doux);
}

.projet-description {
  font-size: 15px;
  line-height: 1.7;         /* un peu plus d'espace entre les lignes */
  margin: 40px 0;
  max-width: 100%;          /* le texte prend toute la largeur de la page */
  white-space: pre-line;    /* \n dans script.js = retour à la ligne */
}

/* Crédits en bas de la page projet : fine ligne au-dessus */
.projet-credits {
  border-top: 1px solid var(--ligne);
  padding-top: 20px;
  margin-bottom: 50px;
}

#projet-credits-texte {
  margin-top: 10px;
  font-size: 13px;            /* un peu plus petit que la description (15px) */
  line-height: 1.4;           /* lignes collées */
  color: var(--texte-doux);   /* même gris que la courte description */
  white-space: pre-line;      /* chaque retour à la ligne = une ligne de crédit */
}


/* ===== 9. À PROPOS ET CONTACT ===== */
#apropos p {
  max-width: 800px;         /* largeur du texte : plus grand = plus large */
  line-height: 1.7;         /* un peu plus d'espace entre les lignes */
  white-space: pre-line;    /* \n\n dans script.js = nouveau paragraphe */
}


.compe.tences {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  font-size: 12px;
}

.competences li::before { content: "★ "; color: var(--rose); }

#contact p { margin-bottom: 24px; }


/* ===== 10. BAS DE PAGE ===== */
footer {
  text-align: center;
  padding: 20px;
  font-size: 11px;
  background: var(--cadre);
  color: #111;
}


/* ===== 11. ANIMATION D'APPARITION =====
   Les sections montent doucement quand on les atteint (voir script.js) */
.apparition {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
}

.apparition.visible { opacity: 1; transform: translateY(0); }


/* ===== 12. TÉLÉPHONE ===== */
@media (max-width: 700px) {

  /* Haut de page : date en haut, puis les 3 boutons en ligne, puis langues + soleil */
  .haut {
    flex-direction: column;
    gap: 14px;
    padding: 24px 22px 0;
  }
  .haut-droite { align-items: flex-start; width: 100%; gap: 10px; }
  .stickers { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
  .stickers .sticker,
  body:has(.hero) .stickers .sticker {
    width: 96px;
    padding: 9px 0;
    font-size: 11px;
  }
  .date,
  body:has(.hero) .date { font-size: 12px; }
  body:has(.hero) .langue { font-size: 13px; }
  body:has(.hero) #bouton-theme { width: 32px; height: 32px; }

  /* Accueil : ton nom un peu plus petit pour tenir dans l'écran */
  .hero { height: 100svh; min-height: 480px; }
  .nom { font-size: clamp(1.8rem, 9vw, 3rem); }

  /* Sections et titres */
  section { padding: 60px 22px; }
  h2 { font-size: 1.3rem; margin-bottom: 20px; }

  /* Filtres : passent à la ligne proprement */
  .filtres { flex-wrap: wrap; gap: 8px 16px; }
  .filtre { padding: 0; text-align: left; }

  /* Cartes : une par ligne */
  .grille { grid-template-columns: 1fr; gap: 26px; }

  /* Page d'un projet */
  .page-projet { padding: 30px 22px 70px; }
  .sticker.gros { font-size: 12px; padding: 12px 26px; }
  .page-projet h1 { margin: 6px 0 22px; }
  .projet-description { font-size: 14px; margin: 30px 0; }

  /* Diaporama */
  .diaporama { gap: 8px; }
  .cadre-photo { height: auto; }
  .photo-diapo { max-height: 55vh; }
  .fleche { width: 24px; height: 24px; }   /* flèches plus petites sur téléphone */
}


/* ===== 13. MESSAGE « TOURNE TON TÉLÉPHONE » =====
   Caché partout, sauf sur téléphone tenu à la verticale */
.tourner {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;                    /* par-dessus tout, même le cadre */
  align-items: center;
  justify-content: center;
  background: var(--papier);
  border: 10px solid var(--cadre); /* même cadre que le site */
  cursor: pointer;
}

@media (max-width: 700px) and (orientation: portrait) {
  .tourner { display: flex; }
}

.tourner.fermee { display: none !important; }   /* après avoir touché l'écran */

/* Le petit téléphone + la flèche (rose le jour, jaune la nuit) */
.tourner-dessin {
  position: relative;
  width: 150px;                    /* taille du dessin : change ce chiffre */
  height: 150px;
  color: var(--cadre);
}

.tourner-dessin svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Seul le téléphone tourne, la flèche reste en place */
.tourner-tel {
  transform-origin: 50% 50%;
  -webkit-animation: tourner 2.2s ease-in-out infinite;
  animation: tourner 2.2s ease-in-out infinite;
}

@-webkit-keyframes tourner {
  0%, 20%   { -webkit-transform: rotate(0deg); }
  50%, 70%  { -webkit-transform: rotate(-90deg); }
  100%      { -webkit-transform: rotate(0deg); }
}

@keyframes tourner {
  0%, 20%   { transform: rotate(0deg); }     /* debout */
  50%, 70%  { transform: rotate(-90deg); }   /* couché */
  100%      { transform: rotate(0deg); }     /* debout */
}