/* L'Égypte de mapped by. La collection donne la grille (charte.css) ; le pays donne ses couleurs, sa lettre et ses motifs.
   L'Égypte en affiche de voyage (planche d'Evrard du 05/11 : des couvertures de carnets de voyage) : un aplat de corail,
   le titre en brique, le soleil et les pyramides en jaune pâle, un dromadaire paré de sa selle, sur le lin du papier.
   Le jaune et le vert du Nil (visio du 04/11) restent : le soleil, la bande verte de la selle.
   Motifs : la frise des pyramides et du soleil (tête des pages), l'arc en carène du Caire (la porte de chaque photo),
   le soleil sur les pyramides (la scène, et le cœur du sceau), le dromadaire paré, la caravane (bande entre deux sections),
   les pyramides au bas des aplats. Lettre : Reem Kufi, un coufique fatimide, celui des mosquées du Caire.
   Tout est porté par la classe pays--egypte (sur <body> d'une page du pays, ou sur l'affiche de l'accueil) :
   la feuille peut voisiner avec celle d'un autre pays sans rien lui prendre.
   Contrastes : kohl sur lin 14,9:1, kohl doux sur lin 6,6:1, brique sur lin 5,6:1, terre sur lin 5,4:1 ;
   kohl sur corail 8,2:1, kohl sur soleil 13,0:1, kohl sur chameau 6,9:1, lin sur terre 5,4:1, soleil sur terre 4,7:1.
   Brique sur corail 3,1:1 : les grands titres seulement. Le soleil et le corail ne portent jamais de texte sur le lin. */
:where(.pays--egypte) {
  --lin: #F8EEE4; --sable-eg: #F2E3D4; --kohl: #2A1714; --kohl-doux: #6B4E44;
  --corail: #FD997D; --brique: #B22A2D; --soleil: #EEE2A0; --ombre-pyr: #E3CF8A;
  --chameau: #EE8D48; --palme: #2D9A6D; --terre: #9B483C; --kraft: #DCB894;

  /* Rôles de la charte commune */
  --papier: var(--lin); --sable: var(--sable-eg); --trait: #E3D0BE; --encre: var(--kohl); --encre-douce: var(--kohl-doux);
  --moutarde: var(--soleil); --moutarde-texte: var(--terre); --destination: var(--corail); --destination-texte: var(--brique);
  --focus: var(--brique); --bandeau: var(--terre); --destination-vif: var(--corail); --seconde: var(--brique);
  --script: 'Reem Kufi', 'Archivo', sans-serif;
  --pointille: radial-gradient(circle, var(--brique) 0 1.1px, transparent 1.5px);
  /* Rôles des planches (sommaire des pays) */
  --aplat: var(--corail); --sur-aplat: var(--kohl); --moutarde-encre: var(--kohl); --sur-seconde: var(--lin);
  /* Le fond derrière la scène : les assises des pyramides en prennent la couleur */
  --fond-scene: var(--corail);

  /* Les pyramides au bas des aplats : une grande, une petite, la base pleine. Lin sur un aplat, corail sur le lin */
  --dents-eg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V10.4L8 2.4L15.6 10L20 5.6L26.4 12Z' fill='%23F8EEE4'/%3E%3Cpath d='M0 12H28V10.4H0Z' fill='%23F8EEE4'/%3E%3C/svg%3E");
  --dents-eg-corail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V10.4L8 2.4L15.6 10L20 5.6L26.4 12Z' fill='%23FD997D'/%3E%3Cpath d='M0 12H28V10.4H0Z' fill='%23FD997D'/%3E%3C/svg%3E");
  /* Carreau (bandes et cadres des planches) : une pyramide de brique à deux assises, le soleil et une petite pyramide de terre sur le kraft */
  --carreau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23DCB894'/%3E%3Cpath d='M17 16L31 42H3Z' fill='%23B22A2D'/%3E%3Cpath d='M11 29.5H20.5M7.5 35.5H23' stroke='%23DCB894' stroke-width='1.6'/%3E%3Ccircle cx='42' cy='20' r='6' fill='%23EEE2A0'/%3E%3Cpath d='M35 42L43.5 30L52 42Z' fill='%239B483C'/%3E%3C/svg%3E");
  /* Arc en carène fatimide, en pourcentages : il suit n'importe quelle baie */
  --carene: polygon(0% 100%, 0% 46%, 0.6% 40.8%, 2.3% 36%, 5% 31.6%, 8.5% 27.6%, 12.7% 23.9%, 17.5% 20.4%, 22.7% 17%, 28.1% 13.7%, 33.8% 10.4%, 39.4% 7.1%, 44.8% 3.6%, 50% 0%, 55.2% 3.6%, 60.6% 7.1%, 66.2% 10.4%, 71.9% 13.7%, 77.3% 17%, 82.5% 20.4%, 87.3% 23.9%, 91.5% 27.6%, 95% 31.6%, 97.7% 36%, 99.4% 40.8%, 100% 46%, 100% 100%);
}
/* Les pins d'étape portent l'encre sur le corail (8,2:1) */
.pays--egypte .pin--etape { color: var(--kohl); }
.pays--egypte .carte__etape text { fill: var(--kohl); }
.pays--egypte .titre-affiche em { transform: none; margin-left: .18em; font-weight: 700; letter-spacing: .01em; color: var(--brique); }
/* Le corail ne porte pas de texte sur le lin (1,8:1) : les textes de couleur de la charte commune passent en brique */
.pays--egypte .picto, .pays--egypte .trou, .pays--egypte .trace__jours, .pays--egypte .bucket__n, .pays--egypte .infos__bloc h3,
.pays--egypte .sommaire__partie a, .pays--egypte .sommaire__haut a, .pays--egypte .mot__titre, .pays--egypte .ressources__bloc h3,
.pays--egypte .jour h2 span, .pays--egypte .lexique__liste dt, .pays--egypte .signature p, .pays--egypte .carte__zoom figcaption { color: var(--brique); }
.pays--egypte .trou { border-color: var(--brique); }
.pays--egypte .carte__baja { fill: var(--brique); }
/* Le soleil se perd sur le lin (1,2:1) : les pastilles et les points de titre prennent un filet de kohl, le pin du logo la brique */
.pays--egypte .pin { box-shadow: 0 0 0 1.5px var(--kohl), 0 0 0 3px var(--papier); }
.pays--egypte section > h2::before { box-shadow: 0 0 0 1.5px var(--kohl), 0 0 0 5px var(--papier); }
.pays--egypte .logo__pin { --moutarde: var(--brique); }
.pays--egypte .pied .logo__pin { --moutarde: var(--soleil); }

/* ---------- Motifs ---------- */

/* La frise des pyramides et du soleil ; le dessin suit la hauteur de la bande */
.frise-eg { display: block; height: 30px; overflow: hidden; pointer-events: none; }
.frise-eg svg, .caravane-eg svg { display: block; width: 100%; height: 100%; }
.caravane-eg { display: block; height: 40px; overflow: hidden; pointer-events: none; }

/* Baie en carène : la forme découpe ce qu'elle contient (photo ou scène) */
.carene { display: block; clip-path: var(--carene); overflow: hidden; }
.carene img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Les pyramides au bas des aplats (la classe garde son nom de « dents ») */
.dents { display: block; height: 1.1rem; background: var(--dents-eg) 0 100% / 2.4rem 100% repeat-x; }

/* La scène : le soleil, les faces au soleil et à l'ombre, les assises de la couleur du fond */
.eg-scene { display: block; width: 100%; height: auto; }
.eg-soleil, .eg-pyr__face { fill: var(--soleil); }
.eg-pyr__ombre { fill: var(--ombre-pyr); }
.eg-pyr__assises { fill: none; stroke: var(--fond-scene); stroke-width: 2.2; stroke-linecap: round; }

/* Le dromadaire paré */
.eg-chameau { display: block; width: 100%; height: auto; overflow: visible; }
.eg-chameau__peau { fill: var(--chameau); }
.eg-chameau__queue { fill: none; stroke: var(--chameau); stroke-width: 3.4; stroke-linecap: round; }
.eg-selle, .eg-selle__pompons, .eg-chameau__triangles { fill: var(--brique); }
.eg-selle__bande { fill: var(--palme); }
.eg-selle__vague { fill: none; stroke: var(--lin); stroke-width: 2.2; stroke-linecap: round; }
.eg-chameau__spirales { fill: none; stroke: var(--brique); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.eg-chameau__oeil { fill: var(--kohl); }

/* Le sceau : disque de soleil, filet, anneau de texte, la scène dans un hublot de corail */
.sceau-eg { display: block; aspect-ratio: 1; --fond-scene: var(--corail); }
.sceau-eg__fond { fill: var(--soleil); }
.sceau-eg__filet { fill: none; stroke: var(--kohl); stroke-width: 1.6; }
.sceau-eg__anneau text { fill: var(--kohl); font: 800 13px var(--titre); font-stretch: 75%; letter-spacing: .05em; text-transform: uppercase; }
.sceau-eg__ciel { fill: var(--corail); }
.sceau-eg__bord { fill: none; stroke: var(--kohl); stroke-width: 2.4; }
.site .sceau-eg__anneau { transform-origin: 100px 100px; animation: sceau-eg 40s linear infinite; }
@keyframes sceau-eg { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sceau-eg__anneau { animation: none !important; } }

/* ---------- L'affiche de l'accueil : une couverture de carnet ---------- */
.affiche-eg { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .9rem; padding: 0 1.6rem 1.6rem; overflow: hidden;
  border: 3px solid var(--kohl); border-radius: 22px; background: var(--corail); color: var(--kohl); text-decoration: none; box-shadow: 8px 8px 0 var(--kohl);
  transition: transform .2s, box-shadow .2s; }
a.affiche-eg:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--kohl); }
.affiche-eg .frise-eg { height: 30px; margin-inline: -1.6rem; color: var(--kohl); }
.affiche-eg__sur { margin: .4rem 0 0; font: 800 .8rem/1.2 var(--texte); letter-spacing: .16em; text-transform: uppercase; }
.affiche-eg__titre { font: 900 clamp(3rem, 6vw, 4.6rem)/.86 var(--titre); font-stretch: 62%; text-transform: uppercase; color: var(--brique); }
.affiche-eg__scene { position: relative; align-self: end; width: min(100%, 17rem); justify-self: center; padding-bottom: 1.2rem; }
.affiche-eg__scene .eg-chameau { position: absolute; width: 48%; right: -10%; bottom: 0; }
.affiche-eg__pied { font: 700 1.25rem/1.2 var(--script); }

/* ---------- La page du pays ---------- */
.eg-haut { position: relative; background: var(--corail); color: var(--kohl); }
.eg-haut > .frise-eg { color: var(--kohl); }
.eg-tete { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; padding-block: 2.5rem 5rem; }
.eg-tete__texte { display: grid; gap: 1.2rem; justify-items: start; }
.eg-titre { font-size: clamp(4.5rem, 14vw, 11rem); line-height: .82; color: var(--brique); }
.eg-tete__sous { max-width: 30ch; margin: 0; font: 500 clamp(1.2rem, 2vw, 1.5rem)/1.35 var(--script); }
/* La porte : une baie en carène, cadre de lin, ombre d'encre ; dedans, le soleil sur les pyramides au crépuscule.
   Le dromadaire passe devant, le sceau déborde à droite. */
.eg-porte { position: relative; width: min(100%, 360px); justify-self: center; aspect-ratio: 3 / 4.2; }
.eg-porte::before { content: ''; position: absolute; inset: 0; clip-path: var(--carene); background: var(--kohl); transform: translate(12px, 12px); }
.eg-porte__baie { position: absolute; inset: 0; background: var(--lin); }
.eg-porte__ciel { position: absolute; inset: 12px; display: flex; align-items: flex-end; clip-path: var(--carene); background: var(--terre); --fond-scene: var(--terre); }
.eg-porte__ciel .eg-scene { width: 120%; margin: 0 -10% -2%; }
.eg-porte .eg-chameau { position: absolute; z-index: 1; width: 58%; left: -22%; bottom: -1.5%; }
.eg-porte .sceau-eg { position: absolute; z-index: 1; width: 40%; right: -14%; top: 22%; }
.eg-haut > .dents { position: absolute; left: 0; right: 0; bottom: -1px; }
@media (max-width: 860px) { .eg-tete { grid-template-columns: 1fr; padding-bottom: 4rem; } .eg-porte { width: min(72%, 300px); } }

.eg-guide { padding-block: 4.5rem 4rem; }
.eg-chapo { max-width: 46ch; margin-top: 1.2rem; font-size: 1.15rem; font-weight: 500; }
.eg-trois { list-style: none; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 2.4rem; padding: 0; }
.eg-trois li { display: grid; align-content: start; gap: .7rem; padding: 1.5rem 1.4rem 1.6rem; border: 3px solid var(--kohl); border-radius: 18px; background: var(--lin); box-shadow: 6px 6px 0 var(--corail); }
.eg-trois__nom { display: flex; align-items: center; gap: .55rem; font: 700 1.9rem/1 var(--script); color: var(--brique); }
.eg-trois__nom .picto { width: 1.4rem; height: 1.4rem; color: var(--kohl); }
.eg-trois p { margin: 0; font-size: 1.05rem; }
/* La caravane, entre deux sections : brique sur le kraft */
.eg-frise { background: var(--kraft); color: var(--brique); border-block: 3px solid var(--kohl); }
.eg-frise .caravane-eg { height: 44px; }

/* Le pied et l'inscription aux couleurs du pays */
.pays--egypte .pied .frise-eg { color: var(--corail); }
.pays--egypte .col-inscription .titre-affiche em { color: var(--soleil); }