/* The articles (single-post design, Elementor template 21601) on a phone and a tablet: a compact header, the
   « Résumer cet article avec » logos on two rows, a lighter table of contents, and a reading rhythm for the text
   (smaller H2, space between list items). Added to every article by scripts/clean_pages.mjs (save). The values are the
   site's own: navy #2F327D, periwinkle #849BFF, DM Sans / Nunito Sans.
   Since 2026-11-10 also the look of every size (appearance only: no text, heading, link or address changes): the text's
   rhythm (lists, tables, quotes, images), a readable hero title, a sticky table of contents and call to action on
   desktop. Selectors stay on the template's own elements so the 40 articles move together. */

/* --- every size ------------------------------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the hero: the title stays white, on a navy veil instead of a pale one, so it reads on any photo */
.elementor-21601 .elementor-element-675ed2c4 {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgb(47 50 125 / .35) 0%, rgb(47 50 125 / .72) 100%) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.elementor-21601 .elementor-element-3a153bb8 .elementor-heading-title { text-shadow: 0 2px 12px rgb(23 25 70 / .35); letter-spacing: -.01em; line-height: 1.2; }
.elementor-21601 .elementor-element-65b6810 .elementor-post-info__item { color: #fff !important; opacity: .92; }
.elementor-21601 .elementor-element-65b6810 .elementor-inline-item + .elementor-inline-item::before {
  content: "•"; margin: 0 .6rem 0 .1rem; opacity: .7;
}

/* the text */
.elementor-21601 .elementor-element-562f4f42 { line-height: 1.75; }
.elementor-21601 .elementor-element-562f4f42 :is(h2, h3, h4) { scroll-margin-top: 7.5rem; } /* under the fixed site menu (104px) */
.elementor-21601 .elementor-element-562f4f42 h2 { margin-top: 2.75rem; margin-bottom: 1rem; line-height: 1.25; letter-spacing: -.01em; }
.elementor-21601 .elementor-element-562f4f42 > h2:first-child { margin-top: 0; }
.elementor-21601 .elementor-element-562f4f42 h3 { margin-top: 1.75rem; margin-bottom: .6rem; line-height: 1.35; }
.elementor-21601 .elementor-element-562f4f42 p { margin-bottom: 1.15rem; }
.elementor-21601 .elementor-element-562f4f42 strong { color: #2F327D; font-weight: 800; }
/* links: the same colour, a quiet underline that fills on hover */
.elementor-21601 .elementor-element-562f4f42 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .2s; }
.elementor-21601 .elementor-element-562f4f42 a:hover { text-decoration-color: currentColor; }
.elementor-21601 .elementor-element-562f4f42 a:focus-visible { outline: 2px solid #849BFF; outline-offset: 2px; border-radius: 4px; }
/* lists: air after them, periwinkle markers */
.elementor-21601 .elementor-element-562f4f42 :is(ul, ol) { margin: 0 0 1.4rem; padding-left: 1.5rem; }
.elementor-21601 .elementor-element-562f4f42 li { margin-bottom: .55rem; padding-left: .25rem; }
.elementor-21601 .elementor-element-562f4f42 li > :is(ul, ol) { margin: .5rem 0 0; }
.elementor-21601 .elementor-element-562f4f42 li::marker { color: #849BFF; font-weight: 800; }
/* tables: a rounded card, lavender header, soft rows */
.elementor-21601 .elementor-element-562f4f42 table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0 1.75rem;
  border: 1px solid #849BFF4D; border-radius: 1.25rem; overflow: hidden; font-size: .9375rem; line-height: 1.55; }
.elementor-21601 .elementor-element-562f4f42 :is(th, td) { padding: .8rem 1rem; border: 0; border-bottom: 1px solid #849BFF26; text-align: left; vertical-align: top; }
.elementor-21601 .elementor-element-562f4f42 :is(thead th, tr:first-child th) { background: #F3F5FF; color: #2F327D; font-family: "DM Sans", sans-serif; font-weight: 700; }
.elementor-21601 .elementor-element-562f4f42 table tbody tr:nth-child(odd) td { background: #fff !important; }
.elementor-21601 .elementor-element-562f4f42 table tbody tr:nth-child(even) td { background: #FAFBFF !important; }
/* WordPress table blocks (stripes, cell borders, their own font) give way to the card above */
.elementor-21601 .elementor-element-562f4f42 table tr { background: transparent !important; }
.elementor-21601 .elementor-element-562f4f42 table :is(td, th) { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important;
  border-bottom: 1px solid #849BFF26 !important; font-family: "Nunito Sans", sans-serif; font-weight: 600; color: #2F327D; }
.elementor-21601 .elementor-element-562f4f42 table tr:last-child > :is(td, th) { border-bottom: 0 !important; }
.elementor-21601 .elementor-element-562f4f42 table :is(thead th, thead td, tbody tr:first-child th) { font-family: "DM Sans", sans-serif; font-weight: 700; background: #F3F5FF; }
.elementor-21601 .elementor-element-562f4f42 table thead { border: 0 !important; }
.elementor-21601 .elementor-element-562f4f42 :is(td, th) > strong:only-child { font-weight: 800; }
.elementor-21601 .elementor-element-562f4f42 tr:last-child > :is(td, th) { border-bottom: 0; }
.elementor-21601 .elementor-element-562f4f42 figure.wp-block-table { margin: 1.5rem 0 1.75rem; }
.elementor-21601 .elementor-element-562f4f42 figure.wp-block-table table { margin: 0; }
/* quotes, rules, images */
.elementor-21601 .elementor-element-562f4f42 blockquote { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border: 0; border-left: 4px solid #849BFF;
  border-radius: 0 1.25rem 1.25rem 0; background: #F3F5FF; color: #2F327D; font-style: normal; }
.elementor-21601 .elementor-element-562f4f42 blockquote p:last-child { margin-bottom: 0; }
.elementor-21601 .elementor-element-562f4f42 hr { height: 0; margin: 2.5rem auto; border: 0; border-top: 2px dashed #BAC5FC; width: 40%; }
.elementor-21601 .elementor-element-562f4f42 img { border-radius: 1.25rem; height: auto; }

/* the table of contents: hover and focus in the brand colour */
.elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item-text { transition: color .2s, padding-left .2s; }
.elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item-text:hover { color: #849BFF !important; }
.elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item-text:focus-visible { outline: 2px solid #849BFF; outline-offset: 3px; border-radius: 4px; }
.elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item { border-bottom-color: #849BFF33 !important; }

/* --- desktop -------------------------------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* a reading size and measure */
  .elementor-21601 .elementor-element-562f4f42 { font-size: 1.0625rem !important; max-width: 46rem; }
  .elementor-21601 .elementor-element-562f4f42 h2 { font-size: 1.875rem; }
  .elementor-21601 .elementor-element-562f4f42 h3 { font-size: 1.3125rem; }

  /* the side column follows the reader — table of contents AND the « Besoin d'un professeur particulier ? » box — with
     no scroll of its own (the wheel always scrolls the page). It sticks under the fixed site menu (104 px) when it fits
     the window; when it is taller (a long table of contents on a laptop), ArticleToc.tsx sets a lower --pp-side-top so
     the column first scrolls with the page, then stays put once the box's bottom is in view: the box always shows, only
     the top of a long table of contents passes under the menu. */
  .elementor-21601 .elementor-element-d559d65 > .e-con-inner, .elementor-21601 .elementor-element-d559d65 { align-items: flex-start !important; }
  .elementor-21601 .elementor-element.elementor-element-9158665 {
    position: sticky; top: var(--pp-side-top, calc(104px + 1.25rem)); align-self: flex-start !important; overflow: visible !important;
    --gap: 1rem !important; gap: 1rem !important; padding-bottom: 0 !important;
  }
  /* the box, compact on a desktop (same text, smaller): heading, text, button, the Caveat line */
  .elementor-21601 .elementor-element.elementor-element-d986f2e { --padding-top: 1.5rem !important; --padding-bottom: 1.25rem !important; --padding-left: 1.5rem !important; --padding-right: 1.5rem !important; --border-radius: 40px !important; }
  .elementor-21601 .elementor-element-1312667 { margin-bottom: .6rem !important; max-width: none !important; width: auto !important; }
  .elementor-21601 .elementor-element-1312667 .elementor-heading-title { font-size: 1.375rem !important; line-height: 1.15 !important; }
  .elementor-21601 .elementor-element-b00d895 { margin-bottom: 1rem !important; max-width: none !important; width: auto !important; font-size: .9375rem !important; line-height: 1.55 !important; }
  .elementor-21601 .elementor-element-e36bebf .elementor-button { padding: .75rem 1.5rem !important; font-size: 1rem !important; line-height: 1.3 !important; }
  .elementor-21601 .elementor-element-bdd42d5 { font-size: 1.1875rem !important; margin-top: .35rem !important; }
  /* a compact table of contents, so that it fits a laptop window */
  .elementor-21601 .elementor-element-26354f5 { --padding-top: 1.25rem !important; --padding-bottom: .75rem !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__header { padding-bottom: .5rem !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__header-title { font-size: 1.375rem !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item:first-of-type { padding-bottom: .4rem !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item:not(:first-of-type) { padding-block: .4rem !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item { font-size: .9375rem !important; line-height: 1.4 !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item-text:hover { padding-left: .35rem; }
}

@media (max-width: 1024px) {
  /* the text: headings at a reading size, air between list items */
  .elementor-21601 .elementor-element-562f4f42 h2 { font-size: 1.5rem !important; line-height: 1.25 !important; margin: 2rem 0 .75rem !important; }
  .elementor-21601 .elementor-element-562f4f42 h3 { font-size: 1.1875rem !important; line-height: 1.3 !important; margin: 1.5rem 0 .5rem !important; }
  .elementor-21601 .elementor-element-562f4f42 p { margin-bottom: 1rem !important; }
  .elementor-21601 .elementor-element-562f4f42 ul,
  .elementor-21601 .elementor-element-562f4f42 ol { padding-left: 1.25rem !important; margin: 0 0 1rem !important; }
  .elementor-21601 .elementor-element-562f4f42 li { margin-bottom: .75rem !important; line-height: 1.6; }
  .elementor-21601 .elementor-element-562f4f42 img { max-width: 100% !important; height: auto !important; }
  .elementor-21601 .elementor-element-562f4f42 table { display: block; max-width: 100%; overflow-x: auto; }
}

@media (max-width: 767px) {
  /* « Résumer cet article avec »: the four assistants on one row, logo only. Each image is the assistant's logo
     followed by its name (ChatGPT.webp, Gemini.webp…); the logo is the image's left square (measured 2026-11-10:
     ChatGPT 0–35 px of 37 high, Gemini 4–30 of 35, perplexity 0–32 of 38, Claude 0–30 of 31), so a square frame
     anchored left shows the logo alone. Same images, links and alt text (the link's name for screen readers). */
  .elementor-21601 .elementor-element-076bf40 .elementor-element-91fc116 {
    display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: .875rem !important;
  }
  .elementor-21601 .elementor-element-076bf40 [class*="ai-btn-"] { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: none !important; }
  .elementor-21601 .elementor-element-076bf40 [class*="ai-btn-"] a {
    display: grid !important; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #F3F5FF;
    box-shadow: 0 6px 16px rgb(47 50 125 / .08); transition: background-color .2s, transform .2s;
  }
  .elementor-21601 .elementor-element-076bf40 [class*="ai-btn-"] a:active { transform: scale(.94); }
  .elementor-21601 .elementor-element-076bf40 [class*="ai-btn-"] a:focus-visible { outline: 3px solid #849BFF; outline-offset: 3px; }
  .elementor-21601 .elementor-element-076bf40 [class*="ai-btn-"] img {
    width: 1.625rem !important; height: 1.625rem !important; max-width: none !important;
    object-fit: cover !important; object-position: left center !important; border-radius: 0 !important;
  }

  /* the table of contents: smaller title, tighter lines */
  .elementor-21601 .elementor-element-26354f5 { --padding-top: 1.25rem !important; --padding-bottom: 1rem !important; --padding-left: 1.25rem !important; --padding-right: 1.25rem !important; padding: 1.25rem 1.25rem 1rem !important; border-radius: 1.5rem !important; }
  .elementor-21601 .elementor-element-26354f5 .elementor-heading-title { font-size: 1.25rem !important; line-height: 1.3 !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item-text { font-size: .9375rem !important; line-height: 1.45 !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item-text-wrapper,
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item { padding-top: .5rem !important; padding-bottom: .5rem !important; }

  .elementor-21601 .elementor-element-26354f5 > *, .elementor-21601 .elementor-element-52dee6c,
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__header, .elementor-21601 .elementor-element-52dee6c .elementor-toc__body { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__header { padding-top: 0 !important; padding-bottom: .5rem !important; }
  .elementor-21601 .elementor-element-26354f5 { margin-bottom: 1.5rem !important; }

  /* the text itself */
  .elementor-21601 .elementor-element-562f4f42 { font-size: 1rem !important; line-height: 1.65 !important; }
  .elementor-21601 .elementor-element-562f4f42 h2 { font-size: 1.375rem !important; }
  .elementor-21601 .elementor-element-562f4f42 h3 { font-size: 1.125rem !important; }
}

/* --- the « Sommaire » as a side panel on a phone / tablet (src/components/ArticleToc.tsx toggles html.pp-toc-open) ------
   The page's own table of contents box (26354f5) leaves the flow and waits off-screen on the right; the floating button
   (bottom right, the lavender square of the site's ☰ but with a list icon) slides it in over a navy backdrop. */
.pp-toc-fab, .pp-toc-backdrop { display: none; }
@media (max-width: 1024px) {
  .pp-toc-fab {
    display: grid; place-items: center; position: fixed; right: 1rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 10002;
    width: 3.25rem; height: 3.25rem; padding: 0; border: 0; border-radius: 1rem; cursor: pointer;
    background: #F3F5FF; color: #849BFF; box-shadow: 0 10px 26px rgb(47 50 125 / .22), 0 0 0 1px #849BFF33;
    transition: background-color .2s, color .2s, transform .2s;
  }
  .pp-toc-fab:hover { background: #E6EAFF; }
  .pp-toc-fab:focus-visible { outline: 3px solid #2F327D; outline-offset: 3px; }
  html.pp-toc-open .pp-toc-fab { background: #849BFF; color: #fff; }

  .pp-toc-backdrop { display: block; position: fixed; inset: 0; z-index: 10000; background: rgb(47 50 125 / .45);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
  html.pp-toc-open .pp-toc-backdrop { opacity: 1; visibility: visible; transition: opacity .25s; }
  html.pp-toc-open, html.pp-toc-open body { overflow: hidden; }

  /* the box becomes the panel: out of the flow, off-screen until opened (hidden from taps, keyboard and readers) */
  .elementor-21601 .elementor-element.elementor-element-26354f5 {
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; z-index: 10001;
    width: min(86vw, 22rem) !important; max-width: none !important; height: auto !important; margin: 0 !important;
    padding: calc(1.75rem + env(safe-area-inset-top, 0px)) 1.5rem 6rem !important; --padding-left: 1.5rem !important; --padding-right: 1.5rem !important;
    overflow-y: auto; overscroll-behavior: contain; background: #fff !important; border: 0 !important;
    border-radius: 2rem 0 0 2rem !important; box-shadow: -18px 0 48px rgb(47 50 125 / .25) !important;
    transform: translateX(105%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
  }
  html.pp-toc-open .elementor-21601 .elementor-element.elementor-element-26354f5 { transform: none; visibility: visible; transition: transform .3s ease; }
  /* the column it leaves: nothing else shows there on these widths (the call to action is hidden on tablet / phone) */
  .elementor-21601 .elementor-element.elementor-element-9158665 { --padding-top: 0 !important; --padding-bottom: 0 !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
  /* inside the panel: the title and the entries, tapped often */
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__header { padding: 0 0 .75rem !important; border-bottom: 2px solid #F3F5FF; margin-bottom: .25rem !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__header-title { font-size: 1.375rem !important; color: #2F327D !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item-text { display: block; padding: .15rem 0; font-size: 1rem !important; line-height: 1.45 !important; }
  .elementor-21601 .elementor-element-52dee6c .elementor-toc__list-item { padding-block: .65rem !important; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .pp-toc-fab, .pp-toc-backdrop, .elementor-21601 .elementor-element.elementor-element-26354f5 { transition: none !important; }
}